<template>
  <Card title="待办" v-bind="$attrs">
    <template v-for="item in navItems" :key="item">
      <CardGrid>
        <router-link :to="{ path: item.url, query: { projectId: 0} }">
          <span class="flex flex-col items-center relative">
            <Icon :icon="item.icon" :color="item.color" size="20" />
            <!-- 动态绑定待办数量 -->
            <span v-if="item.count > 0" class="absolute top-0 right-0 bg-red-500 text-white text-xs px-1.5 py-0.5 rounded-full">
              {{ item.count }}
            </span>
            <span class="text-md mt-2">{{ item.title }}</span>
          </span>
        </router-link>
      </CardGrid>
    </template>
  </Card>
</template>
<script lang="ts" setup>
  import { Card } from 'ant-design-vue';
  import { Icon } from '/@/components/Icon';
  import { onMounted, ref } from 'vue';
  import { getPending } from '@/views/common.api';

  const CardGrid = Card.Grid;

 /* const navItems = [
    {
      title: '子项目审批',
      icon: 'ion:home-outline',
      color: '#1fdaca',
      count:'2',
      url:'/subproject/cSubProjectList',
    },
    {
      title: '项目报价',
      icon: 'ion:notifications',
      color: '#13b0ff',
      count:'0',
      url:'/subproject/cSubProjectList',
    },
    {
      title: '付款申请',
      icon: 'ion:grid-outline',
      color: '#bf0c2c',
      count:'0',
      url:'/subproject/cSubProjectList',
    },
    {
      title: '费用报销',
      icon: 'ion:layers-outline',
      color: '#e18525',
      count:'0',
      url:'/subproject/cSubProjectList',
    },
    {
      title: '合同审批',
      icon: 'ion:settings-outline',
      color: '#3fb27f',
      count:'0',
      url:'/subproject/cSubProjectList',
    },
{
				title: '我的任务',
				icon: 'ion:person-stalker',
				color: '#b27315',
        count:'0',
        url:'/subproject/cSubProjectList',
		}
  ];*/

    const navItems = ref();
    onMounted(() => {
        getAvItems()
    });


  async function getAvItems(){
    navItems.value = await getPending();
  }
</script>
